'use client'

import React, { FC } from 'react'
import { useTheme } from 'next-themes'
import NextIcon from './NextIcon'
import { Tab, Tabs } from '@nextui-org/react'

export interface ThemeSwitchProps {
  className?: string
  collapsed?: boolean
}

export const ThemeSwitch: FC<ThemeSwitchProps> = ({ className, collapsed }) => {
  const { theme, setTheme } = useTheme()

  return React.useMemo(
    () => (
      <Tabs
        key={theme}
        radius={'lg'}
        size="sm"
        className={className}
        placement={collapsed ? 'start' : 'top'}
        selectedKey={theme}
        onSelectionChange={(key: any) => setTheme(key)}
        aria-label="Theme"
      >
        <Tab
          key="light"
          title={
            <>
              <NextIcon type="light" /> {!collapsed && 'light'}
            </>
          }
        />
        <Tab
          key="dark"
          title={
            <>
              <NextIcon type="dark" /> {!collapsed && 'dark'}
            </>
          }
        />
      </Tabs>
    ),
    [theme, className, collapsed]
  )
}
